import React, {PropsWithChildren, useEffect, useState} from "react"
import {Button, List, Popover, Typography} from "antd";
import {getPayRecordsById, PaidRecordResponse} from "../apis/DirectSaleOrderApi";
import {OffsetDateTime} from "@js-joda/core";
import {useGlobalStyle} from "../global.style";
import ArrayUtils from "@zxy-cn/array-utils";
import {YEAR_MONTH_DAY_FORMATER} from "../utils/Date";

export interface PaidRecordPopoverProps {
    orderId: number
}

const PaidRecordPopover: React.FC<PropsWithChildren<PaidRecordPopoverProps>> = ({orderId, children}) => {
    const [paidRecords, setPaidRecords] = useState<PaidRecordResponse[]>([])
    const [loading,setLoading] = useState(false)
    let globalStyle = useGlobalStyle();
    const [visible,setVisible] = useState(false)
    useEffect(() => {
        if (visible){
            setLoading(true)
            getPayRecordsById(orderId).then(res => {
                setPaidRecords(res.data)
            }).finally(() => {
                setLoading(false)
            })
        }
    }, [orderId,visible]);
    return (
        <>
            <Popover onOpenChange={visible => {
                setVisible(visible)
            }} title={"收款记录"} content={
                <List footer={`合计${ArrayUtils.sum(paidRecords, record => record.fee)}`} loading={loading}>
                    {paidRecords.map(record => {
                        return <>
                            <List.Item>{record.createdDateTime.format(YEAR_MONTH_DAY_FORMATER)}<span style={{marginLeft: 24}}>收款<span
                                className={globalStyle.highlightTextColor} >{record.fee}</span></span></List.Item>
                        </>
                    })}
                </List>
            } trigger={"click"}>
                {children}
            </Popover>
        </>
    )
}

export default PaidRecordPopover
